<template lang="">
  <div class="article-detail">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">
      <i class="el-icon-s-home"></i>首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{article.title}}</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span v-for="label in article.label" :key="label">{{label}} </span>
         </el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" @click="$router.push('/article')">
    <h2>
      {{article.title}}
    </h2>
               <div class="article-msg">
              <div class="icon">
                <span class="icon-img">
                  <img
                    src="https://www.tjcblog.com/zb_users/avatar/1.png"
                    alt=""
                  >
                </span>
                <span class="icon-text">张信凯</span>
              </div>
              <div class="date">
                <span class="date-icon"><i class="el-icon-date"></i></span>
                <span class="date-text">{{article.create_at}}</span>
              </div>
              <div class="comment-num">
                <span class="comment-icon"><i class="el-icon-s-comment"></i></span>
                <span class="comment-text">{{article.contents.length}}</span>
              </div>
            </div>
            <el-divider></el-divider>
     <div class="content" v-html="article.content"></div>
    <el-divider></el-divider>
    <div class="last-article"  @click="$router.push('/article/'+article.last.id)">
      上一篇：{{article.last.title}}
    </div>
    <div class="next-article"  @click="$router.push('/article/'+article.next.id)">
      下一篇：{{article.next.title}}
    </div>
    </el-card>
     <el-card>
            <h3 class='aside-nav'> &nbsp;&nbsp; 相关文章</h3>
            <el-divider></el-divider>
            <ul class="share-link">
              <li> <a href="https://element.eleme.cn/#/zh-CN/component/icon">饿了么组件</a>
              </li>
              <li> <a href="https://cn.vuejs.org/">vue的中文文档</a>
              </li>
              <li> <a href="https://uniapp.dcloud.io/">uniapp开发文档</a>
              </li>
              <li> <a href="https://developers.weixin.qq.com/community/homepage">小程序开发者社区</a>
              </li>
              <li> <a href="https://vant-contrib.gitee.io/vant/">vant组件文档</a>
              </li>
              <li> <a href="https://www.tjcblog.com/">谭先生的个人博客</a>
              </li>
              <li> <a href="https://v3.bootcss.com/">bootstrap</a>
              </li>
              <li> <a href="https://www.nowcoder.com/">牛客网</a>
              </li>
              <li> <a href="https://www.csdn.net/ ">csdn官方网站</a>
              </li>
            </ul>
          </el-card>
          <el-card class="comment-wrap">
             <el-tabs v-model="activeName">
               <el-tab-pane label="发表评论" name="first">
                 <el-form :inline="true" :model="formComment" class="demo-form-inline">
                   <el-form-item label="昵称">
                     <el-input v-model="formComment.visitor_name" placeholder="输入昵称"></el-input>
                   </el-form-item>
                  <quill-editor v-model="formComment.content"></quill-editor>

                   <el-form-item>
                     <el-button class="submit" type="primary" @click="onSubmit">提交</el-button>
                   </el-form-item>
                 </el-form>
               </el-tab-pane>
             </el-tabs>
          </el-card>
          <el-card>
            <el-tabs v-model="activeName">
              <el-tab-pane label="评论列表" name="first">
                <div class="commtent" v-for="comment in article.contents" :key="comment">
                  <div class="visitor_name">{{comment.visitor_name}}
                    <el-tag size="mini">访客</el-tag>
                     &nbsp;
                     <span class="comment-date">
                       <i class="el-icon-date"></i>
                       {{comment.create_at }}
                       </span>  </div>
                  <div class="comment_content"> 内容：<span v-html='comment.content'></span> </div>
                </div>
                <div v-if="article.contents.length===0">
                  暂时还没有评论噢
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>
  </div>
</template>
<script>
export default {
  name: 'article-detail',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      formComment: {
        visitor_name: '',
        content: '',
        article_id: this.id * 1
      },
      article: {},
      activeName: 'first'
    }
  },
  created () {
    this.getonearticle()
  },
  methods: {
    async getonearticle () {
      const res = await this.$http.get('/article/getonearticle/' + this.id)
      this.article = res.data.data
    },
    async onSubmit () {
      const res = await this.$http({
        url: '/article/addcomment',
        data: this.formComment,
        method: 'post'
      })
      if (res.data.meta.code === 200) {
        this.$message.success('评论成功！')
        this.article.contents.push(this.formComment)
      } else {
        this.$message.error('评论失败，请注意内容或昵称')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.quill-editor {
  height: 200px;
}
.commtent {
  border: 1px solid #bbbbbb;
  margin: 10px;
  padding: 5px;
  .comment-date {
    font-size: 12px;
  }
  .comment_content {
    color: #966666;
  }
}
.last-article,
.next-article {
  margin: 5px 0;
}
.last-article:hover {
  color: #999999;
}
.next-article:hover {
  color: #999999;
}
.el-divider {
  margin: 10px 0 !important;
}
.article-msg {
  font-size: 13px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  bottom: 0;
  .icon {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 10px;
    img {
      border-radius: 30px;
      width: 30px;
      height: 30px;
    }
    .icon-text {
      margin-left: 10px;
    }
  }
  .date {
    margin-left: 10px;
  }

  .read-num {
    margin-left: 15px;
  }
  .comment-num {
    margin-left: 10px;
  }
}
h2 {
  margin-bottom: 20px;
}
.aside-nav {
  height: 20px;
  line-height: 20px;
  text-align: left;
}
.aside-nav::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 22px;

  background-color: #409eff;
}
ul {
  li {
    height: 25px;
    line-height: 25px;
  }
  li a:hover {
    color: #409eff;
  }
  a::before {
    content: "";
    display: inline-block;
    height: 5px;
    width: 5px;
    background-color: #409eff;
    border-radius: 5px;
  }
}
.article-detail {
  line-height: 24px;

  .el-breadcrumb {
    margin-bottom: 10px;
  }
  .el-card {
    width: 100%;
    margin-bottom: 15px;
  }
}
</style>
